<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>timespinner</title>
<link rel="stylesheet" type="text/css" href="css/main.css" />
<link rel="stylesheet" type="text/css" href="css/SyntaxHighlighter.css" />

<script type="text/javascript" src="js/shCore.js"></script>
<script type="text/javascript" src="js/shBrushJScript.js"></script>
<script type="text/javascript" src="js/shBrushXml.js"></script>
</head>
<body style="text-align:left">
<div style="padding:10px">

<h3>TimeSpinner</h3>
<p>Extend from $.fn.spinner.defaults. Override defaults with $.fn.timespinner.defaults.</p>
<p>
The timespinner is created based on spinner.
It is same as numberspinner but display the time value.
The timespinner allows the user to increase or decrease the time by clicking small spinner buttons on the right of component.
</p>
<img src="images/timespinner.png">

<h4>Dependencies</h4>
<ul>
	<li>spinner</li>
</ul>

<h4>Usage Example</h4>
<p>Create timespinner from markup.</p>
<div class="dp-highlighter"><div class="bar"><div class="tools"></div></div><ol start="1" class="dp-xml"><li class="alt"><span><span class="tag">&lt;</span><span class="tag-name">input</span><span>&nbsp;</span><span class="attribute">id</span><span>=</span><span class="attribute-value">"ss"</span><span>&nbsp;</span><span class="attribute">class</span><span>=</span><span class="attribute-value">"easyui-timespinner"</span><span>&nbsp;&nbsp;</span><span class="attribute">style</span><span>=</span><span class="attribute-value">"width:80px;"</span><span>&nbsp;&nbsp;</span></span></li><li class=""><span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span class="attribute">required</span><span>=</span><span class="attribute-value">"required"</span><span>&nbsp;</span><span class="attribute">data-options</span><span>=</span><span class="attribute-value">"min:'08:30',showSeconds:true"</span><span>&nbsp;</span><span class="tag">/&gt;</span><span>&nbsp;&nbsp;</span></span></li></ol></div><textarea class="html" name="code-timespinner" style="display: none;">	&lt;input id="ss" class="easyui-timespinner"  style="width:80px;"
			required="required" data-options="min:'08:30',showSeconds:true" /&gt;
</textarea>
<p>Create timespinner using javascript.</p>
<div class="dp-highlighter"><div class="bar"><div class="tools"></div></div><ol start="1" class="dp-xml"><li class="alt"><span><span class="tag">&lt;</span><span class="tag-name">input</span><span>&nbsp;</span><span class="attribute">id</span><span>=</span><span class="attribute-value">"ss"</span><span>&nbsp;</span><span class="attribute">style</span><span>=</span><span class="attribute-value">"width:80px;"</span><span class="tag">&gt;</span><span>&nbsp;&nbsp;</span></span></li></ol></div><textarea class="html" name="code-timespinner" style="display: none;">	&lt;input id="ss" style="width:80px;"&gt;
</textarea>
<div class="dp-highlighter"><div class="bar"><div class="tools"></div></div><ol start="1" class="dp-c"><li class="alt"><span><span>$(</span><span class="string">'#ss'</span><span>).timespinner({&nbsp;&nbsp;</span></span></li><li class=""><span>&nbsp;&nbsp;&nbsp;&nbsp;min:&nbsp;<span class="string">'08:30'</span><span>,&nbsp;&nbsp;</span></span></li><li class="alt"><span>&nbsp;&nbsp;&nbsp;&nbsp;required:&nbsp;<span class="keyword">true</span><span>,&nbsp;&nbsp;</span></span></li><li class=""><span>&nbsp;&nbsp;&nbsp;&nbsp;showSeconds:&nbsp;<span class="keyword">true</span><span>&nbsp;&nbsp;</span></span></li><li class="alt"><span>});&nbsp;&nbsp;</span></li></ol></div><textarea class="js" name="code-timespinner" style="display: none;">	$('#ss').timespinner({
		min: '08:30',
		required: true,
		showSeconds: true
	});
</textarea>

<br>
<h4>Properties</h4>
<p>The properties extend from spinner, below is the added properties for timespinner.</p>
<table class="doc-table">
<tbody><tr>
<th><strong>Name</strong></th>
<th><strong>Type</strong></th>
<th><strong>Description</strong></th>
<th><strong>Default</strong></th>
</tr>
<tr>
<td>separator</td>

<td>string</td>
<td>The separator between hour and minute and second.</td>
<td>:</td>
</tr>
<tr>
<td>showSeconds</td>
<td>boolean</td>
<td>Defines if to show the second information.</td>
<td>false</td>
</tr>

<tr>
<td>highlight</td>
<td>number</td>
<td>The field to highlight initially, 0 = hours, 1 = minutes, ��</td>
<td>0</td>
</tr>
</tbody></table>




<h4>Events</h4>
<p>The events extend from spinner.</p>

<h4>Methods</h4>
<p>The methods extend from spinner, below is the overridden methods for timespinner.</p>
<table class="doc-table">
<tbody><tr>
<th><strong>Name</strong></th>
<th><strong>Parameter</strong></th>
<th><strong>Description</strong></th>
</tr>
<tr>

<td>options</td>
<td>none</td>
<td>Return the options object.</td>
</tr>
<tr>
<td>setValue</td>
<td>value</td>
<td>
Set the timespinner value.
<p>Code example:</p>
<pre>$('#ss').timespinner('setValue', '17:45');  // set timespinner value
var v = $('#ss').timespinner('getValue');  // get timespinner value
alert(v);
</pre>
</td>
</tr>
<tr>
<td>getHours</td>

<td>none</td>
<td>Get the current hour value.</td>
</tr>
<tr>
<td>getMinutes</td>
<td>none</td>
<td>Get the current minute value.</td>
</tr>
<tr>
<td>getSeconds</td>
<td>none</td>

<td>Get the current second value.</td>
</tr>
</tbody></table>

</div>
</body>
</html>